<template>
	<view style="min-height: 100vh;background-color: #f4f4f4;">
		<!-- 轮播图 -->
		<view class="banner">
			<swiper class="banner-container" autoplay="true" circular="true" interval="3000" duration="1000"
				@change="cIndex">
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item>
						<image @click="jumpUrl(item);" class="slide-image"
							:class="[ currentIndex === index ? 'active':'' ]" :src="item.image">
						</image>
					</swiper-item>
				</block>
			</swiper>
		</view>

		<navigator url="/pages/noticeList/noticeList" class="notice flex-bet flex-y-center" v-if="notice">
			<view class="notice-Left flex-y-center">
				<!-- <view class="notice-img">
					<image src="@/static/img/titleimg.png">
					</image>
				</view> -->
				<view class="notice-text">公告</view>
				<view class="notice-content overflow-hidden">{{notice.title}}</view>
			</view>
			<view class="notice-right">
				<image src="@/static/img/notice-right.png" style="width: 18px;height: 18px;"></image>
			</view>
		</navigator>
		<!-- 导航 -->
		<!-- 	<view class="menu-navigation">
			<swiper style="height: 100%;">
				<swiper-item class="flex">
					<view v-for="(item,index) in nav_list" :key="index" class="menu-lg" @click="jumpUrl(item);">
						<image :src="item.image">
						</image>
						<view>{{item.title}}</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="add-c-d">
				<view style="display: inline-block;">
					<view class="add-f-s-1"></view>
				</view>
			</view>
		</view> -->
		<view class="menu-navigation">
			<view v-for="(item,index) in nav_list" :key="index" class="menu-lg" @click="jumpUrl(item);">
				<image :src="item.image">
				</image>
				<view>{{item.title}}</view>
			</view>

		</view>
		<!-- 	<view class="area flex-y-center">
			<view class="title flex-grow-0" :class="index == tabIndex ? 'active':''" v-for="(item,index) in tabList"
				:key="index" @tap="chageTab(index)">{{item.name}}</view>
		</view> -->
		<view class="storeContent-title">
			<image src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/20240131085004852166.png"></image>
			商家活动
			<image src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/20240131085004852166.png"></image>
		</view>
		<view class="store-list">
			<view class="store-item" v-for="(item,index) in data.data_list" :key="index"
				@click="storeTap(item.activity_id,item.createtime)">
				<view class="head-item border-bottom info-item">
					<view class="item-left">
						<view class="region-name" :class="[item.platform=='meituan'?'meituan':'elem']">{{item.street}}
						</view>
						<image class="head-img" :src="item.image">
						</image>
					</view>
					<view class="item-right">
						<view class="item">
							<view class="title">{{item.name}}</view>
						</view>
						<view class="item" style="margin-top: 24rpx;">
							<view>放单时间:</view>
							<view>{{item.createtime}}</view>
						</view>
						<view class="item">
							<view>放单:<text class="stock-text">
									{{item.total_stock}}</text></view>
							<view>还剩:<text class="stock-text">
									{{item.stock}}</text></view>
							<view>餐标:<text class="stock-text">{{item.store_price}}</text></view>
						</view>
						<view class="item">
							<image class="icon"
								src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201135650804211.png"
								v-if="item.platform=='eleme'">
							</image>
							<image class="icon"
								src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201135754183391.png"
								v-if="item.platform=='meituan'">
							</image>
						</view>
						<view class="address-text">评鉴规则:{{item.rule}}</view>
					</view>
				</view>

			</view>

			<view style="text-align:center;margin-top:120rpx" v-if="data.no_list">
				<view style="color:#444">暂无数据</view>
			</view>
			<view class="flex-y-center flex-x-center"
				style="text-align: center;height: 74rpx;color: #888;font-size: 9pt" v-if="!data.no_list&&data.no_more">
				没有更多了~</view>
			<view style="text-align: center;height: 174rpx;color: #888;font-size: 9pt"
				class="flex-y-center flex-x-center" v-if="!data.no_list&&!data.no_more">
				加载中...
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getActivityList,
		getWxConfig,
		getIndexData
	} from '../../apirequest/api.js';
	export default {
		components: {

		},
		data() {
			return {
				lock: 0,
				banner: [],
				currentIndex: 0,
				tabIndex: 0,
				tabList: [],
				region_id: 0,
				notice: [],
				nav_list: [],
				data: {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},

			}
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function(t) {
			var o = this;
			o.loadDataList(function() {
				o.data.loading_more = !0;
			});
		},
		onShow() {
			// uni.setStorageSync('old_code', '071TS9Ga10ueKE0YUpGa1sOKaP0TS9G6');
			// uni.setStorageSync('token', 'e2c4d8a0-53d8-44d0-873c-ad10aa18f548');
			this.loadData();
		},
		methods: {
			chageTab(index) {
				this.tabIndex = index;
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				};
				this.region_id = this.tabList[index].id || 0;
				this.loadDataList();
			},
			jumpUrl(item) {
				/* console.log(item) */
				//自定义链接
				if (parseInt(item.links_id) == 5 && item.url) {
					window.location.href = item.url;
				}
				if (parseInt(item.links_id) > 0 && item.links) {
					let url = item.links.url;
					if (parseInt(item.param_id) > 0) {
						url = url + item.param_id;
					}
					console.log(url)
					uni.navigateTo({
						url: '' + url + '',
					});
				}
			},
			//获取数据
			loadData: function() {
				let region_id = uni.getStorageSync('region_id');
				getIndexData({
					region_id: region_id || 0
				}).then((res) => {
					if (res.code == 1) {
						this.banner = res.data.banner;
						this.nav_list = res.data.nav_list;
						this.notice = res.data.notice;
						this.tabList = res.data.tabList;
						// this.region_id = res.data.tabList[this.tabIndex].id || 0;
						this.loadDataList();
					}
				}).catch(err => {
					console.log(err)
				})

			},

			//获取数据列表
			loadDataList: function(f) {
				var o = this;
				if (o.lock) {
					return;
				}
				console.log(12312);
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
					console.log(12333333);
					var page = (o.data.current_page || 0) + 1;
					var data = {
						page: page,
						keyword: ''
						// region_id: o.region_id
					}
					o.lock = 1;
					console.log(o.lock)
					getActivityList(data).then((t) => {
						if (t.code == 1) {
							if (1 == t.data.current_page && !t.data.data.length) {
								o.data.no_list = !0;
								o.data.loading_more = !1
							}
							if (t.data.data && t.data.data.length) {
								o.data.data_list = o.data.data_list || [];
								o.data.data_list = o.data.data_list.concat(t.data.data),
									o.data.current_page = page;
							}
							if (!t.data.has_more) {
								o.data.no_more = !0;
							}

						} else {
							uni.showToast({
								title: '网络繁忙',
								icon: 'error'
							})
						}
						o.lock = 0;
					});
				}
			},
			storeTap(activity_id, date) {
				uni.navigateTo({
					url: '/pages/details/details?id=' + activity_id + "&date=" + date
				});

			},
			cIndex(e) {
				this.currentIndex = e.detail.current
			},
			juliChange() {
				if (this.juliup == false) {
					this.juliup = true
				} else {
					this.juliup = false
				}
			},
			jiageChange() {
				if (this.jiageup == false) {
					this.jiageup = true
				} else {
					this.jiageup = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f7f8fa;
		font-size: 0.75rem;
	}

	.storeContent-title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 33rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #332114;
		line-height: 48rpx;
		margin: 52rpx 30rpx;

		image {
			width: 40rpx;
			height: 25rpx;
			margin: 0 20rpx;
		}
	}


	.notice {
		width: 701rpx;
		height: 78rpx;
		background: #FFF9F0;
		border-radius: 10rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.notice .notice-Left .notice-img image {
		width: 31rpx;
		height: 31rpx;
		border-right: 1px solid #d0d2d7;
		padding-right: 5px;
	}

	.notice .notice-Left .notice-text {
		width: 71rpx;
		height: 42rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFAB0;
		line-height: 42rpx;
		background: #FF8639;
		border-radius: 6rpx;
		text-align: center;
	}

	.notice .notice-Left .notice-content {
		color: #FF8639;
		font-size: 12px;
		margin-left: 15px
	}

	.banner {
		height: 376rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		z-index: 999;
	}

	.banner .banner-container {
		width: 100%;
		height: 376rpx;
	}

	.banner .slide-image {
		height: 376rpx;
		width: 100%;
	
	}

	.banner .active {
		opacity: 1;
		z-index: 10;
		height: 376rpx;
		width: 100%;
		border-radius: 10rpx;

	}

	.overflow-hidden {
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1
			/* 这里设置需要显示几行文本 */
		;
	}

	.add-f-s-1 {
		width: 14px;
		height: 7px;
		border-radius: 15px;
		background-color: #4fbeff;
	}

	.add-f-s-2 {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background-color: rgba(253, 211, 41, .5);
		margin: 0px 2px;
	}

	/* 主题色 */
	.meituan {
		color: #fff !important;
		background-color: #4fbeff
	}

	.elem {
		color: #fff !important;
		background-color: #00a9e9
	}

	.amount {
		color: #f96456;
		font-weight: 700;
		margin: 0 2px
	}

	.store-list {
		display: flex;
		flex-flow: column
	}

	.store-list .store-item {
		border-radius: 9px;
		background-color: #fff;
		margin: 0 14px 9px 14px;
		padding: 9px 12px;
		position: relative;
		overflow: hidden
			/* 信息项 */
			/* 返现项 */
			/* 更多项 */
			/* 地址项 */
			/* 底部项 */
	}

	.store-list .store-item .head-item {
		display: flex;
		padding: 4px 0
	}

	.store-list .store-item .info-item {
		padding-top: 0
	}

	.store-list .store-item .info-item .item-left {
		position: relative
	}

	.store-list .store-item .info-item .item-left .region-name {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 184rpx;
		height: 47rpx;
		line-height: 47rpx;
		background: #1B1B1B;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		color: #FF8840 !important;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.store-list .store-item .info-item .item-left .head-img {
		width: 184rpx;
		height: 184rpx;
		border-radius: 10rpx;
		background-color: #000;
	}

	.store-list .store-item .info-item .item-right {
		margin-left: 9px;
		width: 100%;
		display: flex;
		flex-flow: column;
		line-height: 45rpx;
	}

	.store-list .store-item .info-item .item-right .item {
		flex: 1;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		opacity: 0.82;
		display: flex;
		align-items: center;

	}

	.store-list .store-item .info-item .item-right .item .title {
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #332114;
	}

	.store-list .store-item .info-item .item-right .item .icon {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 27rpx;
		top: 65rpx;
	}

	.store-list .store-item .info-item .item-right .item .stock-text {
		color: #FF221D;
		margin-right: 40rpx;
	}


	.store-list .store-item .info-item .item-right .item .time-region {
		width: 118px;
		padding: 1px 0;
		color: #fff;
		background-color: #8fc926;
		text-align: center;
		border-radius: 1px;
		margin-top: 20rpx;
	}

	.store-list .store-item .address-item {
		border-top: 1px solid #f5f5f5;
		padding: 9px 0 0;
	}

	.store-list .store-item .address-item .icon {
		width: 19px;
		height: 19px
	}

	.store-list .store-item .address-text {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF8840;
	}

	.menu-navigation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.menu-navigation .menu-lg {
		width: 324rpx;
		height: 120rpx;
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		color: #333333;
	}

	.menu-navigation .menu-lg image {
		width: 74rpx;
		height: 74rpx;
		margin: 15rpx 0;
		margin-right: 22rpx;
	}

	.menu-navigation .menu-spot {
		width: 4px;
		background-color: #4fbeff;
		padding: 3px 4px;
		border-radius: 3px;
		margin-top: 9px
	}

	.menu-navigation .menu-spot-circular {
		width: 4px;
		background-color: #4fbeff;
		border-radius: 50%;
		margin-top: 9px;
		margin-left: 4px
	}

	.menu-navigation .add-c-d {
		text-align: center;
		position: relative;
		left: 0;
		right: 0;
		top: -19px
	}

	.area {
		background-color: #fff;
		margin: 9px 14px;
		font-size: 24rpx;
		border-radius: 9px;
		padding: 12px 12px;
		font-size: 28rpx;
		word-wrap: break-word;
		overflow: hidden;
		overflow-x: scroll;
	}

	.area .title {
		border-radius: 40rpx;
		border: 1px solid #333;
		color: #333;
		padding: 3px 13px;
		margin-right: 10px;

	}

	.area .active {
		background: #4fbeff;
		color: #fff;
		border: 1px solid #4fbeff;

	}
</style>